<template>
    <div>
        <div class="bg-gray-500">
            <!-- <h1 class="text-center text-lg">Tailwindcss练习页面</h1> -->
            <div
                class="my-0.5 text-sm text-center py-1 text-gray-100 flex flex-row flex-wrap gap-2 justify-center"
            >
                <router-link :to="{ name: 'flex-layout' }" class="lzh-nav-link">
                    flex布局
                </router-link>
                <router-link :to="{ name: 'grid-layout' }" class="lzh-nav-link">
                    grid布局
                </router-link>
                <router-link
                    :to="{ name: 'css-position' }"
                    class="lzh-nav-link"
                >
                    css-position
                </router-link>
                <router-link
                    :to="{ name: 'css-controls' }"
                    class="lzh-nav-link"
                >
                    css-controls
                </router-link>
            </div>
        </div>

        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
    name: "TailWaindIndexComp",
    setup() {
        const router = useRouter();
        // console.log("router:", router);

        const opentDefalutChildRouter = () => {
            router.push({name:'flex-layout'});
        };
        router.beforeEach((to, from) => {
            // console.log("to:",to);
            // console.log("from:",from);
            if (to.name === "tailwind") {
                opentDefalutChildRouter();
            }
        });
        onMounted(() => {
            // console.log("onMounted", useRoute());
            opentDefalutChildRouter();
        });
        return {};
    },
});
</script>

<style scoped></style>
